import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Spin, Button, BackTop, Affix, message } from 'antd';

// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';

import styles from './ContentInfo.less';

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
@Form.create()
class ContentInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // metaData: {},
      dataLoading: true,
      saving: false,
    };
  }

  componentDidMount() {
    this.isMountedFlag = true;

    const { match } = this.props;
    const { params } = match;
    const { id: productId } = params;

    this.loadData(productId);
  }

  loadData = id => {
    const { dispatch } = this.props;

    this.setState({ dataLoading: true }, () => {
      dispatch({
        type: 'product/get',
        payload: {
          prodictid: id,
        },
      }).then(() => {
        if (this.isMountedFlag) {
          const {
            product: {
              data: { data },
            },
          } = this.props;
          const { content } = data;

          this.setState({
            dataLoading: false,
            // metaData: data,
            editorState: BraftEditor.createEditorState(content),
          });
        }
      });
    });
  };

  // handleChange = (content) => {
  //   console.log(content)
  // }

  // handleRawChange = (rawContent) => {
  //   console.log(rawContent)
  // }

  handleEditorChange = editorState => {
    this.setState({ editorState });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    const { editorState } = this.state;
    const content = editorState.toHTML();

    this.setState({ saving: true });

    dispatch({
      type: 'product/updateContent',
      payload: {
        content,
        ajax: 1,
      },
    }).then(() => {
      const {
        product: { data },
      } = this.props;
      const { code } = data;

      this.setState({ saving: false });

      if (code === 200) {
        message.success('数据已经保存成功，请进行后续操作。');
      }
    });
  };

  render() {
    const { loading } = this.props;
    const {
      // metaData,
      editorState,
      saving,
      dataLoading,
    } = this.state;

    return (
      <Fragment>
        <Card
          title={
            <span>
              详情信息
              <span className={styles.help}>（离开页面前请先保存，以免丢失编辑好的数据！）</span>
            </span>
          }
          className={styles.containorBox}
          bordered={false}
          extra={
            <Affix offsetTop={20}>
              <Button
                type="primary"
                icon="save"
                disabled={dataLoading}
                onClick={this.handleSubmit}
                loading={saving}
              >
                保存
              </Button>
            </Affix>
          }
        >
          <Spin spinning={loading || dataLoading || saving}>
            <div
              style={{
                border: '1px solid #ccc',
              }}
            >
              <BraftEditor
                placeholder="请在此编辑您所需要的内容！"
                value={editorState}
                onChange={this.handleEditorChange}
              />
            </div>
          </Spin>
        </Card>
        <BackTop />
      </Fragment>
    );
  }
}

export default ContentInfo;
